<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>上传图片裁剪</title>
  <link rel="stylesheet" href="css/cropper.css">
  <link rel="stylesheet" href="css/noteEdit2.css">
</head>
<body>
  <form id="notesInfo">
    <div class="getPic">
      <label for="pic">
        <input type="file" id="pic" onchange="getUrl(this,this.files);">
        <input type="hidden" name="notesBanneerImgs" id="listImg">
      </label>
    </div>
    <img src="" alt="" id="newImg">
  </form>
  <!--进度条开始-->
  <div class="loadBox">
    <div class="load">
      <p class="percent">
        0%
      </p>
      <div class="loadProgress">
        <div class="loading"></div>
      </div>
    </div>
  </div>
  <!--进度条结束-->
  <!--头图剪裁-->
  <div class="headImgBox">
    <div class="headImgCrop">
      <canvas id="myCanvas" style="display: none" ></canvas>
      <img src="" alt="" id="headImg">
      <div class="btnBox">
        <button class="cancel">取消</button>
        <button class="sure">确定</button>
      </div>
    </div>
  </div>
  <!--头图剪裁结束-->
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/cropper.js"></script>
  <script src="js/canvas-to-blob.min.js"></script>
  <script src="js/requestAjax.js"></script>
  <script src="js/notepublish2.js"></script>
</body>
</html>